<template>
  <h1>ResourceList:</h1>
  <el-card style="width: 100%">
    <template #header>
      <div class="card-header">
        <h3>资源类别列表</h3>
        <el-button type="primary" icon="plus" @click="handleCreate">创建类别</el-button>
      </div>
    </template>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="序号" align="center" width="80px"/>
    <el-table-column prop="name" label="类别名称" align="center" />
    <el-table-column prop="createdTime" label="创建时间" align="center" />
    <el-table-column prop="id" label="排序" align="center" />
    <el-table-column prop="operation" label="操作" align="center" >
      <el-button type="primary" >编辑</el-button>
      <el-button type="danger" >删除</el-button>
    </el-table-column>
  </el-table>
  </el-card>

<!--  弹窗组件-->
  <AddResource v-model="visible" @close="closeDialog" />

</template>

<script setup>
import { ref,onMounted } from "vue";
import { getAllResources } from "@/api/resource";
import AddResource from "./dialog/AddResource.vue";

const visible = ref(false);
const handleCreate = () => {
  visible.value = true;
};
const closeDialog = () => {
  visible.value = false;
};

const tableData = ref([]);
onMounted(() => {
  getResourceCategory();
});

const getResourceCategory = () => {
  getAllResources().then((res) => {
    tableData.value = res.data.data;
    // console.log(res);
  });
};
//   methods: {
//     getResourceCategory() {
//       getAllResources().then((res) => {
//         this.tableData = res.data.data;
//         // console.log(res);
//       });
//     },
//   },
// };
</script>

<style>
.card-header {
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 0px 20px; 
}
</style>
